<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="60%" @close="closeDialog" :close-on-click-modal="false">
      <el-form ref="dialogFormRef" :model="state.uploadAudio" :rules="state.rules" size="default" label-width="100px"
        v-loading="state.dataLoading" label-position="right" style="width: 90%;text-align: center;">
        <el-form-item label="子任务名称" prop="name">
          <el-input type="textarea" v-model="state.uploadAudio.name" placeholder="请输入子任务名称" clearable ></el-input>
        </el-form-item>
        <el-form-item label="难度等级">
          <el-select v-model="state.uploadAudio.level"  placeholder="请选择难度等级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="state.uploadAudio.sort" placeholder="请选择优先级">
            <el-option label="低" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="高" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参考信源" prop="refer">
          <el-input type="textarea" v-model="state.uploadAudio.refer" placeholder="请输入参考信源" clearable></el-input>
        </el-form-item>
        <el-form-item label="price" prop="price">
          <el-input-number v-model="state.uploadAudio.price" :precision="2" :step="0.1" :max="10" placeholder="请输入单价"></el-input-number>
        </el-form-item>
        <el-form-item label="参考指南" prop="guide">
          <el-input type="textarea" v-model="state.uploadAudio.guide" placeholder="请输入参考指南" clearable ></el-input>
        </el-form-item>
        <el-upload
        class="upload-demo"
				ref="uploadFileRef"
				:limit="1"
				accept=".xlsx, .xls"
				:action="state.server_url"
        :before-upload="uploadFormat"
				:on-progress="handleFileUploadProgress"
				:on-success="handleFileSuccess"
				:auto-upload="false"
        :data="state.uploadAudio"
        :on-exceed="onexceed"
        :on-change="handleChange"
				drag>
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip text-center">
						<span>仅允许导入xls、xlsx格式文件。</span>
						<el-link type="primary" :underline="false" style="font-size: 12px;" @click="importTemplate">下载模板</el-link>
					</div>
				</template>
			</el-upload>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="onSubmit()"
              size="default">确认</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="systemRoleDialog">
import { normApi } from '/@/api/norm'
import { ElMessage } from 'element-plus';
import { toolsApi } from '/@/api/tools'
import { getServerUrl,getServerPublic } from "/@/utils/getHost.js";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const uploadFileRef = ref();

const dialogFormRef = ref();
const router = useRouter();
const state = reactive({
  // server_url:getServerUrl(),
  server_url:getServerUrl()+'/importFile',
  userId: null,
  index:0,
  userIndex:0,
  apiData: {
		id:'',
	},
  rules: {
    
  },
  uploadAudio:{ 
    task_id:'',  
    name:'',
    level:'',
    refer:'',
    price:'',
    guide:'',
    sort:'',
    type:1,
  },
  selectFile:false,
  dialog: {
    isShowDialog: false,
    title: '',
    submitTxt: '',
  },
});

// 打开弹窗
const openDialog = (task_id) => {
  state.selectFile = false;
  state.dialog.isShowDialog = true;
  state.dialog.title = '导入指标';
  // 清空数据
  state.uploadAudio.task_id =task_id;
  state.uploadAudio.name ='';
  state.uploadAudio.level ='1';
  state.uploadAudio.refer ='';
  state.uploadAudio.price =1;
  state.uploadAudio.guide ='';
  state.uploadAudio.sort ='1';
};

/**模板下载 */
function importTemplate() {
	    let url = getServerPublic()+'/public/template.xlsx';
			const iframe = document.createElement('iframe'); // 创建一个HTML 元素
			iframe.style.display = 'none'; // 隐藏iframe 防止影响页面      
			iframe.style.height = 0; // 高度设置0 防止影响页面      
			iframe.src = url;// 下载链接       
			document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求      // 5分钟之后删除
			setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000);
			ElMessage.success('下载成功,请点击下载列表查看!');
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
	// upload.isUploading = true;
};

const uploadFormat = () => {
  if(state.uploadAudio.name == ""){
    ElMessage.error('请填写子任务名称');
    state.selectFile = false;
    return false;
  }
}

// 选择文件
const handleChange= (file, fileList) => {
  if (fileList.length < 0) {
    ElMessage.error('未选择文件');
    state.selectFile = false;
    return false;
  }else{
    state.selectFile = true;
  }
}

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
    uploadFileRef.value.clearFiles()
    closeDialog();
    emit('refresh');
    ElMessage.success('上传成功！')
};
// 文件数量限制
const onexceed = (response, file, fileList) => {
	ElMessage.error('仅可上传1个文件');
};

const onSubmit = () => {
  if(state.selectFile){
    uploadFileRef.value.submit()
  }else{
    ElMessage.error('未选择文件');
  }
}
// 关闭弹窗
const closeDialog = () => {
  dialogFormRef.value.resetFields();
  state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
  openDialog,
});


onMounted(() => {

});
</script>

<style scoped lang="scss">
.el-dialog__body {
 
  display: flex;

  justify-content: center;

  align-content: center;

}
.el-input.is-disabled{
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__inner){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__wrapper){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
.el-textarea.is-disabled{
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
  :deep(.el-textarea .el-textarea__inner){
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
  :deep(.el-textarea .el-textarea__wrapper){
    background:#fff !important;
    color: var(--el-radio-text-color) !important;
    -webkit-text-fill-color: var(--el-radio-text-color) !important;
  }
</style>
